<template>
	<view>
		<!-- <u-table>
			<u-tr>
				<u-th>类型</u-th>
				<u-th>可回收物</u-th>
				<u-th>库存量</u-th>
			</u-tr>
			<u-tr v-for="(item,index) in tableData" :key="index">
				<u-td>{{item.large}}</u-td>
				<u-td>{{item.name}}</u-td>
				<u-td>{{item.weight}}{{item.isweighing?'KG':'件'}}</u-td>
			</u-tr>
		</u-table> -->
		
		<view class="table-list">
			<view class="tr u-border-bottom">
				<view class="th"><text>类型</text></view>
				<view class="th u-text-left"><text>可回收物</text></view>
				<view class="th u-text-right"><text>库存量</text></view>
				<view class="th u-text-right"><text>操作</text></view>
			</view>
			<view v-for="(item,index) in tableData" :key="index">
				<view 
				class="tr"
				:class="index == tableData.length - 1?'last':'u-border-bottom'"
				@click="tableClick(item)"
				>
					<view class="td">
						<text>{{item.large}}</text>
					</view>
					<view class="td u-text-left">
						<text class="">{{item.name}}</text>
					</view>
					<view class="td u-text-right">
						<text class="u-font-bold">{{item.weight}}{{item.isweighing?'KG':'件'}}</text>
					</view>
					<view class="td u-text-right">
						<text class="links u-font-24" @click.stop="startStockAdjust(item)">调整库存</text>
						<!-- <text class="links u-font-24" @click.stop="edit(item)">调整</text>
						<text class="divider"></text>
						<text class="links u-font-24" @click.stop="del(item.id)">删除</text> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 调整库存 -->
		<u-modal 
			v-model="show" 
			ref="uModal" 
			:async-close="true"
			:show-cancel-button="true" 
			:negative-top="200" 
			title="调整库存" 
			@confirm="handleStockAdjust"
			>
			<view class="slot-content">
				<u-form label-width="150rpx">
					<u-form-item label="调整类型">
						<u-radio-group v-model="form.type">
							<u-radio name="1">增加库存</u-radio>
							<u-radio name="2">减少库存</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="调整额度">
						<u-input type="digit" placeholder="请输入数字" border v-model="form.weight"/>
					</u-form-item>
					<u-form-item label="调整原因">
						<u-input placeholder="请输入" border v-model="form.reason" type="textarea"/>
					</u-form-item>
				</u-form>
				<!-- <view class="u-p-t-30">
					<text class="u-tips-color u-font-24">注：此操作为手动增减或减少当前小类的库存</text>
				</view> -->
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	
	export default {
		props:{
			sendStoreId:{
				type: [Number,String],
				default: 0
			}
		},
		data() {
			return {
				tableData: [],
				summary: {
					weight: 0,
					quantity: 0,
					amount: 0
				},
				show: false,
				form:{
					type: 1,
					weight: null,
					reason: ""
				}
			}
		},
		computed: {
			...mapState({
				operatorid: state => state.operatorid,
				storeId: state => state.storeId
			})
		},
		watch:{
			show(val){
				if(!val){
					this.form = {
						type: 1,
						weight: null,
						reason: ""
					}
				}
			}
		},
		// onLoad() {
		// 	this.getStockOverview()
		// },
		mounted() {
			this.getStockOverview()
		},
		methods: {
			tableClick(item){
				uni.navigateTo({
					url: '/pages/shop/statistics/inventory/details/details?id='+item.id
				})
			},
			flattenData(data, level = 0, parentPath = []) {
				let result = [];
				data.forEach(item => {
					const currentPath = [...parentPath, item];
					item.product.forEach(product => {
						result.push({
							id: product.id,
							name: product.name,
							isweighing: product.isweighing,
							weight: product.weight,
							large: item.name || item.typenames,
							bigid: item.id,
							level: level,
							isCategory: true,
						});
					})
					// 递归处理子类型
					if (item.type && item.type.length > 0) {
						// console.log(currentPath)
						const childData = this.flattenData(item.type, level + 1, currentPath);
						console.log('递归处理子类型-childData:', childData)
						childData.forEach((cell) => {
							result = result.concat([{
								id: cell.id,
								name: `${cell.large}-${cell.name}`,
								// name: this.getSubCategoryName(currentPath),
								isweighing: cell.isweighing,
								weight: cell.weight,
								large: currentPath[0].name,
								bigid: currentPath[0].id,
								level: cell.level,
								isCategory: cell.isCategory,
							}]);
						})
	
					}
				})
				return result;
			},
			getStockOverview() {
				this.tableData = []
				// this.$u.post(`/Statistics/StockOverview`, {
				// 	operatorid: this.operatorid,
				// 	storeIds: [this.storeId]
				// }).then(res => {
				// 	this.tableData = this.flattenData(res.type)
				// 	this.summary.weight = res.weight
				// 	this.summary.quantity = res.quantity
				// 	this.summary.amount = res.amount
				// 	console.log(this.tableData)
				// 	this.loading = false
				// })
				this.$u.get(`/Store/Stock/Get`, {
					storeId: this.sendStoreId || this.storeId
				}).then(res => {
					this.tableData = this.flattenData(res)
					console.log(this.tableData)
					this.loading = false
				})
			},
			startStockAdjust(item) { //点击调整库存
				this.form.productId = item.id
				this.show = true
			},
			handleStockAdjust() { //提交库存调整
				this.$u.post('/Store/Stock/Adjust', {
					storeId: this.storeId,
					details: [
						{
							"productId": this.form.productId,
							"weight": this.form.type == 1?this.form.weight:-Number(this.form.weight),
							"reason": this.form.reason
						}
					]
				}).then((res) => {
					uni.showToast({
						title: '库存调整成功',
						icon: 'none'
					})
					this.show = false
					this.getStockOverview()
				}).catch(()=>{
					this.$refs.uModal.clearLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table-list{
		background-color: #fff;
		padding: 0 20rpx;
		.tr{
			display: flex;
			align-items: center;
			&:active{
				opacity: 0.6;
			}
			.th{
				flex: 1;
				color: $u-tips-color;
				font-size: 24rpx;
				line-height: 3em;
			}
			.td{
				flex: 1;
				padding: 24rpx 0;
			}
		}
		.links{
			color: $u-color-blue;
			border-bottom: 1px solid $u-color-blue;
		}
		.divider{
			border-right: 1px solid $u-border-color;
			height: 14px;
			padding-left: 8px;
			margin-right: 8px;
		}
	}
	.slot-content{
		padding: 30rpx;
	}
	.tag{
		background-color: $u-color-blue;
		color: #fff;
		border-radius: 4rpx;
	}
	.last{
		border-width: 0;
	}
</style>
